.page-util-toast {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 5000;
  width: 100%;
  height: 100%;
  display: none;

  &.toast-status-show {
    display: block;
  }

  .page-util-toast-mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #0000003d;  
  }

  .page-util-toast-container {
    display: table;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }
  .page-util-toast-content {
    display: table-row;
    width: 100%;
    height: 100%;
  }

  .page-util-toast-main {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
  }

  .page-util-toast-text {
    position: relative;
    display: inline-block;
    min-width: 100px;
    max-width: 240px;
    min-height: 40px;
    padding: 10px 20px;
    line-height: 20px;
    background: #ffffff;
    vertical-align: middle;
    border-radius: 14px;
    box-sizing: border-box;

    &.toast-type-loading {
      padding-left: 54px;
      &::before {
        position: absolute;
        display: block;
        content: '';
        width: 40px;
        top: 0;
        bottom: 0;
        left: 10px;
        background: url('data:image/svg+xml;charset=utf-8,<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1584616889888" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1219" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 42.666667c-25.6 0-42.666667 17.066667-42.666667 42.666666v170.666667c0 25.6 17.066667 42.666667 42.666667 42.666667s42.666667-17.066667 42.666667-42.666667V85.333333c0-25.6-17.066667-42.666667-42.666667-42.666666z m0 682.666666c-25.6 0-42.666667 17.066667-42.666667 42.666667v170.666667c0 25.6 17.066667 42.666667 42.666667 42.666666s42.666667-17.066667 42.666667-42.666666v-170.666667c0-25.6-17.066667-42.666667-42.666667-42.666667zM238.933333 179.2c-17.066667-17.066667-42.666667-12.8-59.733333 4.266667-17.066667 17.066667-17.066667 42.666667 0 59.733333L298.666667 362.666667c17.066667 17.066667 42.666667 17.066667 59.733333 4.266666 17.066667-17.066667 17.066667-42.666667 4.266667-59.733333l-4.266667-4.266667-119.466667-123.733333zM725.333333 661.333333c-17.066667-17.066667-42.666667-12.8-59.733333 4.266667-17.066667 17.066667-17.066667 42.666667 0 59.733333l119.466667 119.466667c17.066667 17.066667 42.666667 17.066667 59.733333 4.266667s17.066667-42.666667 4.266667-59.733334l-4.266667-4.266666-119.466667-123.733334zM298.666667 512c0-25.6-17.066667-42.666667-42.666667-42.666667H85.333333c-25.6 0-42.666667 17.066667-42.666666 42.666667s17.066667 42.666667 42.666666 42.666667h170.666667c25.6 0 42.666667-17.066667 42.666667-42.666667z m640-42.666667h-170.666667c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667h170.666667c25.6 0 42.666667-17.066667 42.666666-42.666667s-17.066667-42.666667-42.666666-42.666667zM302.933333 661.333333l-119.466666 119.466667c-17.066667 17.066667-17.066667 42.666667-4.266667 59.733333s42.666667 17.066667 59.733333 4.266667l4.266667-4.266667 119.466667-119.466666c17.066667-17.066667 17.066667-42.666667 4.266666-59.733334s-46.933333-17.066667-64 0z m388.266667-285.866666c12.8 0 21.333333-4.266667 29.866667-12.8l119.466666-119.466667c17.066667-17.066667 17.066667-42.666667 4.266667-59.733333-17.066667-17.066667-42.666667-17.066667-59.733333-4.266667l-4.266667 4.266667-119.466667 119.466666c-17.066667 17.066667-17.066667 42.666667 0 59.733334 8.533333 8.533333 21.333333 12.8 29.866667 12.8z" p-id="1220" fill="%238a8a8a"></path></svg>');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 28px;
      }
    }

    
  }
}
